<template>
  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
        4, ${height} 0, ${height - 4} 0, 4
      `" />
    </svg>

    <svg
      :width="width"
      height="40px"
      :key="item"
      v-for="item in border"
      :class="`${item} dv-border-svg-container`"
    >
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#0078FF;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#00FFFF;stop-opacity:1" />
        </linearGradient>
      </defs>
      <polygon
          fill="url(#grad1)"
          :points="`${width - 18}, 3 ${width - 18}, 0 0, 0 0, 6 70, 6 80, 3 `"
      />
      <polygon
          fill="#00FFFF"
          :points="`${width}, 3 ${width}, 0 ${width-3}, 0 ${width-3}, 3 `"
      />
      <polygon
          fill="#00FFFF"
          :points="`${width-6}, 3 ${width-6}, 0 ${width-9}, 0 ${width-9}, 3 `"
      />
      <polygon
          fill="#00FFFF"
          :points="`${width-12}, 3 ${width-12}, 0 ${width-15}, 0 ${width-15}, 3 `"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// import autoResize from '../../../mixin/autoResize'
import autoResize from '@jiaminghi/data-view/lib/mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox10',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-10',

      border: ['left-top'],

      defaultColor: ['#1d48c4', '#d3e1f8'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this
    mergeColor()
  }
}
</script>

<style lang="scss" scoped>
.dv-border-box-10{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #04101B;

  .dv-border-svg-container {
    position: absolute;
    display: block;
  }

  .right-top {
    right: 0;
    transform: rotateY(180deg);
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
